<template>
  <div>
    <el-row>
      <el-col>
        <div :id="id" :class="className" :style="{height:height,width:width}" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'pie'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '380px'
    },
    pieChartData: {
      type: Array,
      default: Array
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    const that = this
    this.chart = echarts.init(document.getElementById(this.id))
    window.onresize = function() {
      that.chart.resize()
    }
    this.$nextTick(() => {
      this.initChart(this.pieChartData)
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(pieChartData) {
      const color2 = ['#0083FF',
        '#FFBE57',
        '#60D8A9',
        '#FF5A47',
        '#3C5FA1',
        '#9d9d9d',
        '#4ee9eb',
        '#a28efd',
        '#fcb5a1',
        '#845b5e'
      ]
      this.chart.setOption({
        // title: { text: '全部' },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 0,
          top: 20,
          bottom: 20,
          data: pieChartData.legendData
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '人员资质',
            type: 'pie',
            radius: ['20%', '30%'], // 环形
            center: ['30%', '50%'], // x,y的位置
            data: pieChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                color: item => {
                  return color2[item.dataIndex % (color2.length)] // 用完调色盘的颜色会取余调色盘重复用
                }
              }
            },
            label: {
              show: true,
              formatter(param) {
                // correct the percentage
                // return param.name + ' (' + param.percent * 2 + '%)'
                return param.percent * 2 + '%'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
